<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jquery -->
    <script src="../../frame/semanticUI/jquery.min.js"></script>
    <!-- CDN引入semanticUI框架 -->
    <link rel="stylesheet" type="text/css" href="../../frame/semanticUI/UI-master/semantic.min.css">
    <!-- semanticUI依赖于Jquery -->
    <script src="../../frame/semanticUI/UI-master/semantic.min.js"></script>

    <link rel="stylesheet" href="../../frame/elementUI/lib-master/theme-chalk/index.css"/>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../../frame/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="../../frame/elementUI/lib-master/index.js"></script>


    <link rel="stylesheet" href="../../css/login.css">
    <title>后台登陆页</title>

</head>
<script>
    $(function () {

    });
</script>
<body>
    <div id="app">
        <div class="ui container">
            <div class="ui middle aligned center aligned grid">
                <div class="column">

                    <!-- 登陆内容 -->
                    <div style="background-color: whitesmoke;padding: 20px" id="admin">
                        <div v-loading="loading">
                            <!-- 标题 -->
                            <h1 class="adminh1">用户登录</h1>
                            <el-form :model="formData" mstatus-icon :rules="rules" ref="formData" label-width="100px"> <!-- ref:表单验证(和提交数据相同) -->
                                <el-form-item label="用户名：" prop="username">  <!-- prop的值与rules里面要验证的字段值是对应 -->
                                    <el-input
                                            prefix-icon="el-icon-user" style="width: 250px"
                                            type="text" v-model="formData.username" autocomplete="off">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="密 码：" prop="password">
                                    <el-input
                                            prefix-icon="el-icon-menu"
                                            style="width: 250px" show-password type="password"
                                            v-model="formData.password" autocomplete="off">
                                    </el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button el-button type="primary" @click="loginData()" style="margin-right: 100px">登录</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <!-- 登陆按钮 -->
                    <div class="ui message">
                        新用户? <a href="#">注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
    <!-- axios -->
    <script src="../../frame/axios/axios.min.js"></script>
<script>

    Vue.config.productionTip=false  //以阻止 vue 在启动时生成生产提示。 <!-- 全局配置 -->
    new Vue({
        el:'#app',
        data:{
            loading: false,  //
            formData:{
                username:'',
                password:''
            },
            //表单规则
            rules:{
                username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
                           { min:2,max:80, message: '用户名不能小于2位,，大于80位', trigger: 'blur' },
                          ],  //blur失去焦点
                password: [{ required: true, message: '密码不能为空', trigger: 'blur'},
                           { pattern:/^[ a-zA-Z0-9]{6,30}$/, message: '密码不能小于6位,不能大于30位,无特殊字符', trigger: 'blur'},
                          ],
            },
        },
        methods:{
            loginData(){
                console.log(this.formData.username);
                this.$refs.formData.validate((valid) => {
                    if (valid) {
                        axios({
                            method: "POST",
                            url: "/user/login",
                            data:{
                                username:this.formData.username,
                                password:this.formData.password
                            },
                            contentType: "application/json;charset=utf-8"
                        }).then((res)=>{
                            console.log(res.data);
                            if(this.formData.username!=res.data.username){
                                this.$message.error('用户名或密码错误');
                            }else{
                                this.$message.success({
                                    message: '登陆成功，即将跳转',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    location.href="first.html";
                                },1500)

                            }
                        });
                    } else {
                        this.$message.error('此提交不符合规则');
                        return false;
                    }
                });

            },
            resetForm(){

            }
        }
    });
</script>
</html>